<template>
    <div id="SearchResult" @scroll="showa($event)">
        <comitemVue :songDate="data" />
    </div>
</template>

<script>
import comitemVue from "./comitem.vue";
export default {
    components: { comitemVue },
    data() {
        return {
            data: [],
            offst: 0,
            isResult: true,
        }
    },
    async mounted() {
        this.request();


    },
    methods: {
        showa(e) {

            if (e.target.clientHeight + e.target.scrollTop + 10 >= e.target.scrollHeight) {
                if (this.isResult) {
                    this.isResult = false;
                    this.offst++;
                    this.request();
                    this.isResult = true;
                }
            }

        },
        async request() {
            this.data.push(...(await this._fetch("/search", { keywords: this.$store.state.seachInpval, offset: this.offst })).result.songs.map(item => {
                return {
                    id: item.id,
                    name: item.name,
                    authorNmae: item.artists[0].name,
                    ablunName: item.album.name,
                }
            }))
        }
    }
}

</script>

<style lang="scss" scoped>
@import "../assets/scss/vw";
#SearchResult {
}
</style>